import React, { Component } from "react";
import { NavBar, Icon, Toast } from "antd-mobile";
import "./Shop.less";
import yes from "../../assets/img/yes.webp";
import no from "../../assets/img/no.webp";
import { reqShopList, reqcartedit, reqShopDelete } from "../../http/api.js";
export default class Shop extends Component {
  constructor() {
    super();
    this.state = {
      cart: [],
      selectAll: false,
    };
  }
  componentDidMount() {
    this.reqlist();
  }
  reqlist() {
    reqShopList({ uid: JSON.parse(sessionStorage.getItem("info")).uid }).then(
      (res) => {
        if (res.data.code === 200) {
          let arr1 = res.data.list[0].content ? res.data.list[0].content : [];
          let arr2 = res.data.list[1].content ? res.data.list[1].content : [];
          let arr = arr1.concat(arr2);
          let cart = this.state.cart;
          arr.forEach((item) => {
            let obj = cart.find((i) => i.id === item.id);
            item.checked = obj ? obj.checked : false;
          });
          this.setState({
            ...this.state,
            cart: arr,
          });
        }
      }
    );
  }
  editShop({ uid, id, type, num }) {
    if (num <= 1 && type == 1) {
      Toast.info("宝贝不能再少了", 1);
      return;
    }
    reqcartedit({ id, type, num, uid }).then((res) => {
      if (res.data.code === 200) {
        Toast.info(res.data.msg, 1);
        this.reqlist();
      }
    });
  }
  delectShop({ id, uid }) {
    reqShopDelete({ id }).then((res) => {
      if (res.data.code === 200) {
        Toast.info(res.data.msg, 1);
        this.reqlist();
      }
    });
  }
  SingleChoice(index) {
    let cart = this.state.cart;
    console.log(index);
    console.log(cart);
    cart[index].checked = !cart[index].checked ;
    this.setState({
      ...this.state,
      cart: cart,
    });
  }

  checkAll() {
    let selectAll =this.state.selectAll;
    let cart = this.state.cart;
    cart.forEach((item) => (item.checked = !selectAll));
    this.setState({
      ...this.state,
      cart: cart,
      selectAll:!selectAll
    })
  
  }
  render() {
    let { cart, selectAll, Price } = this.state;
    let arr = cart.filter((item) => {
      return item.checked === true;
    });
    let allPrice = arr.reduce((val, item) => (val += item.price * item.num), 0);
    return (
      <div className="shop">
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => {
            this.props.history.go(-1);
          }}
        >
          购物车
        </NavBar>
        <ul className="nav">
          <li>全部({})</li>
          <li>降价({})</li>
          <li>常卖</li>
          <li>分类</li>
        </ul>
        {cart
          ? cart.map((item, index) => (
              <div key={item.id} className="item">
                <div
                  className="chekced"
                  onClick={() => {
                    this.SingleChoice(index);
                  }}
                >
                  {item.checked ? (
                    <div>
                      <img src={yes} alt="" />
                    </div>
                  ) : (
                    <div>
                      <img src={no} alt="" />
                    </div>
                  )}
                </div>
                <div className="right">
                  <div className="imger">
                    <img src={item.img} alt="" />
                  </div>
                  <div>
                    <h4>{item.goodsname}</h4>
                    <div>price:{item.price}</div>
                    <div>
                      <button
                        onClick={() => {
                          this.editShop({
                            uid: JSON.parse(sessionStorage.getItem("info")).uid,
                            id: item.id,
                            type: 1,
                            num: item.num,
                          });
                        }}
                      >
                        -
                      </button>
                      {item.num}
                      <button
                        onClick={() => {
                          this.editShop({
                            uid: JSON.parse(sessionStorage.getItem("info")).uid,
                            id: item.id,
                            type: 2,
                            num: item.num,
                          });
                        }}
                      >
                        +
                      </button>
                    </div>
                    <button
                      onClick={() => {
                        // console.log(item.id);
                        this.delectShop({
                          id: item.id,
                          uid: JSON.parse(sessionStorage.getItem("info")).uid,
                        });
                      }}
                    >
                      删除
                    </button>
                  </div>
                </div>
              </div>
            ))
          : null}

        {/* 全选 */}
        <div
          className="chekced2 chekced"
          onClick={() => {
            this.checkAll();
            
          }}
        >
          {selectAll ? (
            <div>
              全选
              <img src={yes} alt="" />
            </div>
          ) : (
            <div>
              全选 <img src={no} alt="" />
            </div>
          )}
        </div>

        {/* 总价 */}
        <div className="chekced2">总价：{allPrice}</div>
      </div>
    );
  }
}
